// 1.0 导入Home组件和CityList组件
import Home from "./pages/Home";
import CityList from "./pages/CityList";
import Map from "./pages/Map";
import HouseInfo from "./pages/HouseInfo";

// 2.0 导入路由的三大组件
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
} from "react-router-dom";

function App() {
  return (
    <div className="App">
      {/* 3.0 把Router组件当做整个项目的跟组件，在其中注册路由规则和使用Link */}
      <Router>
        {/* 3.0.1 注册Home和CityList两个组件的路由规则 */}
        {/* 3.0.1.1 当url路径在跟目录的时候重定向到Home组件 */}
        <Route
          path="/"
          exact
          render={() => <Redirect to="/home/index"></Redirect>}
        ></Route>
        <Route path="/home" component={Home}></Route>
        <Route path="/citylist" component={CityList}></Route>
        <Route path="/map" component={Map}></Route>
        <Route path="/houseinfo/:hid" component={HouseInfo}></Route>
      </Router>
    </div>
  );
}

export default App;
